<script lang="ts">

import {onMounted, ref} from "vue";
import router from "@/router";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
  setup(){
    const custId=ref('')
    const custAccount=ref('')
    const isCollapse = ref(true)
    const activeMenu ='1'

    onMounted(() => {
      getCustId()
      getAccount()
      checkAdmin()
    })
    const handleOpen = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
    const expandMenu=()=>{
      isCollapse.value=false
    }
    const collapseMenu=()=>{
      isCollapse.value=true
    }
    const jumpToOrder=()=>{
      router.push('/adminOrder')
    }

    const jumpToProduct=()=>{
      router.push('/manageProduct')
    }

    const jumpToIndex=()=>{
      router.push('/index')
    }

    const jumpToUser=()=>{
      router.push('/adminUser')
    }



    const getCustId = () =>{
      let item = localStorage.getItem("custId");
      try {
        custId.value = item ? JSON.parse(item) : null;
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
    }
    const getAccount = () =>{
      let item = localStorage.getItem("custAccount");
      try {
        custAccount.value = item ? JSON.parse(item) : null;
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
    }

    const checkAdmin = async () => {
      const res=await request.get(`/user/check/${custId.value},${custAccount.value}`)
      console.log(res.data.msg)
      if(res.data.msg!=="ok"){
        await router.push("/login")
        ElMessage("信息有误")
      }else{
        if(res.data.data!=="admin"){
          await router.push("/index")
          ElMessage("你不是管理员!")
        }
      }
    }


  return{
    handleOpen,
    handleClose,
    isCollapse,
    expandMenu,
    collapseMenu,
    jumpToOrder,
    jumpToProduct,
    activeMenu,
    jumpToIndex,
    jumpToUser
  }
  }

}
</script>

<template>
  <div class="adminNavi">
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        default-active="activeMenu"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        style="height: 725px"
        @mouseenter="expandMenu"
        @mouseleave="collapseMenu"
    >
      <el-menu-item index="1" @click="jumpToOrder">
        <el-icon><document/></el-icon>
        <span>查询订单</span>
      </el-menu-item>
      <el-menu-item index="2" @click="jumpToProduct">
        <el-icon><setting /></el-icon>
        <span>管理商品</span>
      </el-menu-item>
      <el-menu-item index="3" @click="jumpToUser">
        <el-icon><user/></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="4" @click="jumpToIndex">
        <el-icon><SwitchButton /></el-icon>
        <span>返回首页</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.adminNavi{
  width:200px;
  height:100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>